#ifndef __HTML_H__
#define __HTML_H__

#include "config.h"

// index_html，字符串里面是HMTL语言，编写好HTML后，经过压缩，压缩网址：https://www.sojson.com/jshtml.html，然后在将每个双引号替换成转义字符
// String index_html = String("<html><head><meta charset=\"UTF-8\"><meta name=\"viewport\"content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\"content=\"ie=chrome\"><title>ESP32网页配置</title><style>.centered-input{margin:auto;width:50%;font-size:20px;font-family:SimHei}form input,form button,form select{margin-bottom:20px;font-size:20px}</style></head>") +
//                     String("<body><div class=\"centered-input\"><form action=\"/HandleVal\"method=\"post\">WiFi名称：<input type=\"text\"name=\"stassid\"><br>WiFi密码：<input type=\"password\"name=\"stapawd\"><br>MQTT地址：<input type=\"text\"name=\"mqttaddr\"><br>MQTT端口：<input type=\"text\"name=\"mqttport\"><br>MQTT用户：<input type=\"text\"name=\"mqttuser\"><br>MQTT密码：<input type=\"password\"name=\"mqttpawd\"><br><input type=\"submit\"value=\"连接\"></form></div></body></html>");

const char *index_html = "\
<!DOCTYPE html>\
<html lang=\"zh-CN\">\
  <head>\
    <meta charset=\"utf-8\">\
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\
    <title>物联网</title>\
		<style>\
      *{\
        margin: 10;\
        padding: 0;\
        box-sizing: border-box;\
        font-family: \"Courier New\", 楷体;\
      }\
      body{\
        display: flex;\
        flex-direction: column;\
        background-image: linear-gradient(200deg,#ec77ab,#7873f5);;\
        background-repeat: no-repeat;\
        background-attachment: fixed;\
        align-items: center;\
        justify-content: center;\
      }\
      .menu{\
        width: 400px;\
        height: 48px;\
        display: flex;\
        flex-direction: row;\
        align-items: center;\
        justify-content: center;\
        list-style-type: none;\
        /* background-color: #8746ff; */\
        line-height: 48px;\
      }\
      .menu a {\
        width: 70px;\
        display: block;\
        font-size: 24px;\
        color: white;\
        text-decoration: none;\
        text-align: center;\
      }\
      .menu a:hover {\
        background-color: #af64a0;\
      }\
      .title-text{\
        display: flex;\
        flex-direction: column;\
        align-items: center;\
        justify-content: center;\
        height: 700px;\
        line-height: 80px;\
        font-size: 30px;\
        letter-spacing: 15px;\
        color: aliceblue;\
        /* background-color: #ec77ab; */\
      }\
		</style>\
  </head>\
  <body>\
    <div>\
      <ul class=\"menu\">\
        <li><a href=\"/index.html\">首页</a></li>\
        <li><a href=\"/config.html\">配置</a></li>\
        <li><a href=\"/connect.html\">网络</a></li>\
        <li><a href=\"/public.html\">发布</a></li>\
        <li><a href=\"/subcribe.html\">订阅</a></li>\
      </ul>\
    </div>\
    <div class=\"title-text\">\
      <h1>网络配置和消息收发</h1>\
      <h3>作者: Yukey</h3>\
    </div>\
</body>\
</html>";

const char *config_html = "\
<!DOCTYPE html>\
<html lang=\"zh-CN\">\
  <head>\
    <meta charset=\"utf-8\">\
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\
    <title>物联网</title>\
		<style>\
      *{\
        margin: 10;\
        padding: 0;\
        box-sizing: border-box;\
        font-family: \"Courier New\", 楷体;\
      }\
      body{\
        display: flex;\
        flex-direction: column;\
        background-image: linear-gradient(200deg,#ec77ab,#7873f5);;\
        background-repeat: no-repeat;\
        background-attachment: fixed;\
        align-items: center;\
        justify-content: center;\
      }\
      .menu{\
        width: 400px;\
        height: 48px;\
        display: flex;\
        flex-direction: row;\
        align-items: center;\
        justify-content: center;\
        list-style-type: none;\
        /* background-color: #8746ff; */\
        line-height: 48px;\
      }\
      .menu a {\
        width: 70px;\
        display: block;\
        font-size: 24px;\
        color: white;\
        text-decoration: none;\
        text-align: center;\
      }\
      .menu a:hover {\
        background-color: #af64a0;\
      }\
      .page {\
        display: flex;\
        flex-direction: column;\
        align-items: center;\
        justify-content: center;\
        height: 400px;\
        width: 400px;\
        line-height: 50px;\
        font-size: 20px;\
        letter-spacing: 3px;\
        color: white;\
        /* background-color: #ec77ab; */\
		  }\
      input {\
        font-size: 20px;\
      }\
      button {\
        background-color: #b700ff;\
        color: #ffffff;\
        box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.7);\
        border-radius: 10px;\
        height: 40px;\
        width: 100px;\
        font-size: 20px;\
        border: none;\
      }\
      button:active {\
        background-color: #6a0094;\
      }\
		</style>\
  </head>\
  <body>\
    <div>\
      <ul class=\"menu\">\
        <li><a href=\"/index.html\">首页</a></li>\
        <li><a href=\"/config.html\">配置</a></li>\
        <li><a href=\"/connect.html\">网络</a></li>\
        <li><a href=\"/public.html\">发布</a></li>\
        <li><a href=\"/subcribe.html\">订阅</a></li>\
      </ul>\
    </div>\
		<div class=\"page\">\
			<form>\
					WiFi名称：<input type=\"text\" id=\"staSSID\"><br>\
					WiFi密码：<input type=\"password\" id=\"staPAWD\"><br>\
					MQTT地址：<input type=\"text\" id=\"mqttADDR\"><br>\
					MQTT端口：<input type=\"text\" id=\"mqttPORT\"><br>\
					MQTT用户：<input type=\"text\" id=\"mqttUSER\"><br>\
					MQTT密码：<input type=\"password\" id=\"mqttPAWD\"><br>\
					<button type=\"button\" onclick=\"config()\">发送配置</button>\
			</form>\
		</div>\
    <script>\
      function config() {\
        let getStrint = \"stassid=\"+staSSID.value+\"&stapawd=\"+staPAWD.value+\"&mqttaddr=\"+mqttADDR.value+\"&mqttport=\"+mqttPORT.value+\"&mqttuser=\"+mqttUSER.value+\"&mqttpawd=\"+mqttPAWD.value;\
        var xhttp = new XMLHttpRequest();\
        xhttp.onreadystatechange = function() {\
          if (this.readyState == 4 && this.status == 200) {\
            document.getElementById(\"deviceIP\").innerHTML = this.responseText;\
          }\
        };\
        xhttp.open(\"GET\", \"/config?\"+getStrint, true);\
        xhttp.send();\
      }\
    </script>\
</body>\
</html>";

const char *connect_html = "\
<!DOCTYPE html>\
<html lang=\"zh-CN\">\
  <head>\
    <meta charset=\"utf-8\">\
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\
    <title>物联网</title>\
		<style>\
      *{\
        margin: 10;\
        padding: 0;\
        box-sizing: border-box;\
        font-family: \"Courier New\", 楷体;\
      }\
      body{\
        display: flex;\
        flex-direction: column;\
        background-image: linear-gradient(200deg,#ec77ab,#7873f5);;\
        background-repeat: no-repeat;\
        background-attachment: fixed;\
        align-items: center;\
        justify-content: center;\
      }\
      .menu{\
        width: 400px;\
        height: 48px;\
        display: flex;\
        flex-direction: row;\
        align-items: center;\
        justify-content: center;\
        list-style-type: none;\
        /* background-color: #8746ff; */\
        line-height: 48px;\
      }\
      .menu a {\
        width: 70px;\
        display: block;\
        font-size: 24px;\
        color: white;\
        text-decoration: none;\
        text-align: center;\
      }\
      .menu a:hover {\
        background-color: #af64a0;\
      }\
      .page {\
        display: inline;\
        flex-direction: column;\
        align-items: center;\
        justify-content: center;\
        height: 400px;\
        width: 400px;\
        line-height: 50px;\
        font-size: 20px;\
        letter-spacing: 3px;\
        color: white;\
        padding-left: 11px;\
        padding-top: 25px;\
        /* background-color: #ec77ab; */\
		  }\
      span {\
        /* background-color: aqua; */\
        height: 40px;\
        width: 400px;\
        font-size: 20px;\
        text-align: center;\
      }\
      button {\
        background-color: #b700ff;\
        color: #ffffff;\
        box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.7);\
        border-radius: 10px;\
        height: 40px;\
        width: 100px;\
        font-size: 20px;\
        border: none;\
      }\
      button:active {\
        background-color: #6a0094;\
      }\
		</style>\
  </head>\
  <body>\
    <div>\
      <ul class=\"menu\">\
        <li><a href=\"/index.html\">首页</a></li>\
        <li><a href=\"/config.html\">配置</a></li>\
        <li><a href=\"/connect.html\">网络</a></li>\
        <li><a href=\"/public.html\">发布</a></li>\
        <li><a href=\"/subcribe.html\">订阅</a></li>\
      </ul>\
    </div>\
    <div class=\"page\">\
      WiFi设备IP：<span id=\"deviceIP\">NA</span><br>\
      WiFi连接状态：<span id=\"wifiStatus\">NA</span><br>\
      MQTT连接状态：<span id=\"mqttStatus\">NA</span><br>\
      系统时钟(ms)：<span id=\"systemTick\">NA</span><br>\
      重连是否成功：<span id=\"recRet\">NA</span><br>\
      <button type=\"button\" onclick=\"public()\">一键重连</button>\
    </div>\
    <script>\
      function connect() {\
        var xhttp = new XMLHttpRequest();\
        xhttp.open(\"GET\", \"/connect\", true);\
        xhttp.send();\
      }\
      setInterval(function() {\
        connect_info();\
      }, 500);\
      function connect_info() {\
        var xhttp = new XMLHttpRequest();\
        xhttp.onreadystatechange = function() {\
          if (this.readyState == 4 && this.status == 200) {\
            let array = this.responseText.split(',');\
            document.getElementById(\"deviceIP\").innerHTML = array[0];\
            document.getElementById(\"wifiStatus\").innerHTML = array[1];\
            document.getElementById(\"mqttStatus\").innerHTML = array[2];\
            document.getElementById(\"systemTick\").innerHTML = array[3];\
          }\
        };\
				xhttp.open(\"GET\", \"/infomation\", true);\
				xhttp.send();\
      }\
    </script>\
</body>\
</html>";

const char *public_html = "\
<!DOCTYPE html>\
<html lang=\"zh-CN\">\
  <head>\
    <meta charset=\"utf-8\">\
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\
    <title>物联网</title>\
		<style>\
      *{\
        margin: 10;\
        padding: 0;\
        box-sizing: border-box;\
        font-family: \"Courier New\", 楷体;\
      }\
      body{\
        display: flex;\
        flex-direction: column;\
        background-image: linear-gradient(200deg,#ec77ab,#7873f5);;\
        background-repeat: no-repeat;\
        background-attachment: fixed;\
        align-items: center;\
        justify-content: center;\
      }\
      .menu{\
        width: 400px;\
        height: 48px;\
        display: flex;\
        flex-direction: row;\
        align-items: center;\
        justify-content: center;\
        list-style-type: none;\
        /* background-color: #8746ff; */\
        line-height: 48px;\
      }\
      .menu a {\
        width: 70px;\
        display: block;\
        font-size: 24px;\
        color: white;\
        text-decoration: none;\
        text-align: center;\
      }\
      .menu a:hover {\
        background-color: #af64a0;\
      }\
      .page {\
        flex-direction: column;\
        align-items: center;\
        justify-content: center;\
        height: 400px;\
        width: 400px;\
        line-height: 50px;\
        font-size: 20px;\
        letter-spacing: 3px;\
        color: white;\
        padding-left: 11px;\
        padding-top: 25px;\
        /* background-color: #ec77ab; */\
		  }\
      input {\
        font-size: 20px;\
      }\
      span {\
        /* background-color: aqua; */\
        height: 40px;\
        width: 400px;\
        font-size: 20px;\
        text-align: center;\
      }\
      button {\
        background-color: #b700ff;\
        color: #ffffff;\
        box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.7);\
        border-radius: 10px;\
        height: 40px;\
        width: 100px;\
        font-size: 20px;\
        border: none;\
      }\
      button:active {\
        background-color: #6a0094;\
      }\
		</style>\
  </head>\
  <body>\
    <div>\
      <ul class=\"menu\">\
        <li><a href=\"/index.html\">首页</a></li>\
        <li><a href=\"/config.html\">配置</a></li>\
        <li><a href=\"/connect.html\">网络</a></li>\
        <li><a href=\"/public.html\">发布</a></li>\
        <li><a href=\"/subcribe.html\">订阅</a></li>\
      </ul>\
    </div>\
    <div class=\"page\">\
      发布主题：<input type=\"text\" id=\"pubTop\"><br>\
      发布内容：<br>\
      <textarea  style=\"width: 360px;height: 150px; resize: none; \" rows=\"4\" id=\"pubCot\"  warp=\"soft\"></textarea><br>\
      发布是否成功：<span id=\"pubRet\">NA</span><br>\
      <button type=\"button\" onclick=\"public()\">确认发布</button>\
    </div>\
    <script>\
      function public() {\
        let getString = \"pubtopic=\"+encodeURIComponent(pubTop.value)+\"&pubcontext=\"+encodeURIComponent(pubCot.value);\
        var xhttp = new XMLHttpRequest();\
        xhttp.onreadystatechange = function() {\
          if (this.readyState == 4 && this.status == 200) {\
            document.getElementById(\"pubRet\").innerHTML = this.responseText;\
          }\
        };\
        xhttp.open(\"GET\", \"/public?\"+getString, true);\
        xhttp.send();\
      }\
    </script>\
</body>\
</html>";

const char *subcribe_html = "\
<!DOCTYPE html>\
<html lang=\"zh-CN\">\
  <head>\
    <meta charset=\"utf-8\">\
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\
    <title>物联网</title>\
		<style>\
      *{\
        margin: 10;\
        padding: 0;\
        box-sizing: border-box;\
        font-family: \"Courier New\", 楷体;\
      }\
      body{\
        display: flex;\
        flex-direction: column;\
        background-image: linear-gradient(200deg,#ec77ab,#7873f5);;\
        background-repeat: no-repeat;\
        background-attachment: fixed;\
        align-items: center;\
        justify-content: center;\
      }\
      .menu{\
        width: 400px;\
        height: 48px;\
        display: flex;\
        flex-direction: row;\
        align-items: center;\
        justify-content: center;\
        list-style-type: none;\
        /* background-color: #8746ff; */\
        line-height: 48px;\
      }\
      .menu a {\
        width: 70px;\
        display: block;\
        font-size: 24px;\
        color: white;\
        text-decoration: none;\
        text-align: center;\
      }\
      .menu a:hover {\
        background-color: #af64a0;\
      }\
      .page {\
        flex-direction: column;\
        align-items: center;\
        justify-content: center;\
        height: 400px;\
        width: 400px;\
        line-height: 50px;\
        font-size: 20px;\
        letter-spacing: 3px;\
        color: white;\
        padding-left: 11px;\
        padding-top: 25px;\
        /* background-color: #ec77ab; */\
		  }\
      input {\
        font-size: 20px;\
      }\
      span {\
        /* background-color: aqua; */\
        height: 40px;\
        width: 400px;\
        font-size: 20px;\
        text-align: center;\
      }\
      button {\
        background-color: #b700ff;\
        color: #ffffff;\
        box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.7);\
        border-radius: 10px;\
        height: 40px;\
        width: 100px;\
        font-size: 20px;\
        border: none;\
      }\
      button:active {\
        background-color: #6a0094;\
      }\
		</style>\
  </head>\
  <body>\
    <div>\
      <ul class=\"menu\">\
        <li><a href=\"/index.html\">首页</a></li>\
        <li><a href=\"/config.html\">配置</a></li>\
        <li><a href=\"/connect.html\">网络</a></li>\
        <li><a href=\"/public.html\">发布</a></li>\
        <li><a href=\"/subcribe.html\">订阅</a></li>\
      </ul>\
    </div>\
    <div class=\"page\">\
      <form>\
          订阅主题：<input type=\"text\" id=\"subTop\"><br>\
          订阅是否成功：<span id=\"subRet\">NA</span><br>\
          <button type=\"button\" onclick=\"subcribe()\">确认订阅</button><br><br>\
          取消主题：<input type=\"text\" id=\"canTop\"><br>\
          取消是否成功：<span id=\"canRet\">NA</span><br>\
          <button type=\"button\" onclick=\"cancel()\">取消订阅</button><br><br>\
          订阅内容显示：<br>\
          <span id=\"subCot\">NA</span><br><br>\
      </form>\
    </div>\
    <script>\
      function subcribe() {\
        let getString = \"subtopic=\"+encodeURIComponent(subTop.value);\
        var xhttp = new XMLHttpRequest();\
        xhttp.onreadystatechange = function() {\
          if (this.readyState == 4 && this.status == 200) {\
            document.getElementById(\"subRet\").innerHTML = this.responseText;\
          }\
        };\
        xhttp.open(\"GET\", \"/subcribe?\"+getString, true);\
        xhttp.send();\
      }\
      function cancel() {\
        let getString = \"cantopic=\"+encodeURIComponent(canTop.value);\
        var xhttp = new XMLHttpRequest();\
        xhttp.onreadystatechange = function() {\
          if (this.readyState == 4 && this.status == 200) {\
            document.getElementById(\"canRet\").innerHTML = this.responseText;\
          }\
        };\
        xhttp.open(\"GET\", \"/cancel?\"+getString, true);\
        xhttp.send();\
      }\
      setInterval(function() {\
          subcribe_loop();\
      }, 500);\
      function subcribe_loop() {\
        var xhttp = new XMLHttpRequest();\
        xhttp.onreadystatechange = function() {\
          if (this.readyState == 4 && this.status == 200) {\
            document.getElementById(\"subCot\").innerHTML = this.responseText;\
          }\
        };\
				xhttp.open(\"GET\", \"/content\", true);\
				xhttp.send();\
      }\
    </script>\
</body>\
</html>";

#endif /* __HTML_H__ */